<template>
  <div class="page">
    <div class="weui-grids">
      <block v-for="(item, index) in grids" :key="index">
        <navigator :url="item.link" class="weui-grid card-shadow" hover-class="weui-grid_active">
          <i :class="['icon', item.icon]"></i>
          <i :class="['icon', 'icon-1', item.icon1]"></i>
          <div class="weui-grid__label">{{item.name}}</div>
          <div class="note">{{item.note}}</div>
        </navigator>
      </block>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    const introduce = '/pages/puerperaIntroduce/main'
    return {
      grids: [
        { icon: 'icon-kr', icon1: 'icon-kr-1', name: '开乳', note: '孕期跟踪，母乳喂养', link: `${introduce}?type=kr` },
        { icon: 'icon-cr', icon1: 'icon-cr-1', name: '催乳', note: '手法催乳，轻柔无痛', link: `${introduce}?type=cr` },
        { icon: 'icon-myh', icon1: 'icon-myh-1', name: '满月汗', note: '排湿驱寒，增强免疫', link: `${introduce}?type=myh` },
        { icon: 'icon-chxf', icon1: 'icon-chxf-1', name: '产后修复', note: '缓解阴道松弛和子宫脱垂', link: `${introduce}?type=chxf` },
        { icon: 'icon-yezs', icon1: 'icon-yezs-1', name: '育儿知识', note: '科学护理，护航宝宝健康', link: `${introduce}?type=yezs` },
        { icon: 'icon-myz', icon1: 'icon-myz-1', name: '满月照', note: '经典影像，定格美好瞬间', link: `${introduce}?type=myz` }
      ]
    }
  },
  methods: {

  }
}
</script>
<style lang="less">
.weui-grids {
  padding: 40upx 30upx;
}
.weui-grid {
  width: 48%;
  border: none;
  height: 360upx;
  margin-bottom: 30upx;
  text-align: center;
  border-radius: 8upx;
}
.weui-grid .icon {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  margin-top: 30upx;
  margin-bottom: 30upx;
}
.weui-grid .icon-1 {
  display: none;
  background-color: #71a0fe;
}
.weui-grid .icon-kr,
.weui-grid .icon-kr-1 {
  background-size: 50upx 72upx;
}
.weui-grid .icon-kr {
  background-color: rgba(138, 47, 250, 0.2);
}
.weui-grid .icon-cr,
.weui-grid .icon-cr-1 {
  background-size: 60upx 64upx;
}
.weui-grid .icon-cr {
  background-color: #fff2f2;
}
.weui-grid .icon-myh,
.weui-grid .icon-myh-1 {
  background-size: 70upx 54upx;
}
.weui-grid .icon-myh {
  background-color: #e7f1fc;
}
.weui-grid .icon-chxf,
.weui-grid .icon-chxf-1 {
  background-size: 60upx 52upx;
}
.weui-grid .icon-chxf {
  background-color: #fef6e3;
}
.weui-grid .icon-yezs,
.weui-grid .icon-yezs-1 {
  background-size: 56upx 54upx;
}
.weui-grid .icon-yezs {
  background-color: #f2eaff;
}
.weui-grid .icon-myz,
.weui-grid .icon-myz-1 {
  background-size: 60upx 50upx;
}
.weui-grid .icon-myz {
  background-color: #ebffea;
}
.weui-grid.weui-grid_active {
  color: #fff;
  background-image: linear-gradient(90deg, #3c57fa, #3186ff);
}
.weui-grid.weui-grid_active .weui-grid__label {
  color: #fff;
}
.weui-grid.weui-grid_active .icon {
  display: none;
}
.weui-grid.weui-grid_active .icon-1 {
  display: inline-block;
}
.weui-grid:nth-child(2n) {
  margin-left: 4%;
}

</style>